<template>
  <div class="registerbox">
    <p>Login</p>
    <div class="usernameBox">
      <input type="text" class="username" v-model="login.username" placeholder="请输入账号" /><br />
    </div>
    <div class="passwordBox">
      <input type="text" class="password" v-model="login.password" placeholder="请输入密码" /><br />
    </div>
    <div class="codeBox">
      <input type="text" class="code" v-model="login.check_code" /><br />
      <div @click="refreshImg"> <img :src="codeimg" alt="" /></div>
    </div>
    <button class="loginBottom" @click="Login">
      <h3>登&nbsp;录</h3>
    </button><br />
  </div>
</template>

<script setup>
// vue模块
import { inject, ref, onMounted } from "vue";
//vuex
import { useStore } from "vuex";
// ui模块
import { ElMessage } from "element-plus";
// 路由模块
import { useRouter } from "vue-router";
// axios模块
const $axios = inject("$axios");
const $store = useStore()
//页面数据
const login = ref({
  username: "",
  password: "",
  search_id: "",
  check_code: "",
});
// 获取滑块的dom
const slideBox = ref();
// 创建路由对象
const router = useRouter();
// 定义验证码图片的src
let codeimg = ref();

// 获取验证码
function refreshImg() {
  $axios
    .get("/common/checkImg")
    .then((resp) => {
      // console.log(resp.data);
      codeimg.value = resp.data.data.b64s;
      login.value.search_id = resp.data.data.search_id;
    })
    .catch((err) => {
      console.log(err);
    });
}

// 登录按钮
function Login() {
  $axios
    .post("user/login", login.value)
    .then((resp) => {
      // console.log(resp.data);
      if (resp.data.code == 1000) {
        //浏览器弹出消息
        ElMessage({
          message: "登陆成功",
          type: "success",
        });
        $store.state.Token =resp.data.data.token
        //token存放到localstorage
        localStorage.setItem('token',resp.data.data.token);

        //路由跳转到个人中心
        router.push({
          name: "myself",
        });
      } else {
        ElMessage.error(resp.data.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//组件创建
onMounted(() => {
  //验证码
  refreshImg()
})
</script>

<style scoped>
.registerbox {
  color: white;
  padding-top: 50px;
}

p {
  text-align: center;
  font-size: 43px;
}

.username,
.password {
  width: 200px;
  height: 30px;
  border: none;
  outline: none;
  font-size: 15px;
  border-radius: 8px;
  padding-left: 10px;
}

::-webkit-input-placeholder {
  font-size: 10px;
  color: rgb(173, 172, 172);
}

.usernameBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
}

.usernameBox::before {
  content: "账号：";
}

.passwordBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
  padding-top: 40px;
}

.passwordBox::before {
  content: "密码：";
}

.codeBox {
  width: 300px;
  position: absolute;
  left: 50%;
  top: 280px;
  transform: translateX(-49%);
}

.codeBox::before {
  content: "验证码：";
}

.codeBox img {
  width: 100px;
  height: 30px;
  position: absolute;
  left: 150px;
  top: 0px;
}

.code {
  width: 60px;
  height: 30px;
  border: none;
  border-radius: 8px;
  padding-left: 10px;
  outline: none;
}

.loginBottom {
  display: block;
  width: 150px;
  height: 40px;
  background-color: white;
  border: none;
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  cursor: pointer;
}

.loginButtom:focus {
  outline: none;
}
</style>